<div class="product_img clearfix">

    <div id="product_main_image" th:if="*{media['primary']}" th:with="primaryMedia=*{media['primary']}">
        <a th:href="@{${primaryMedia.url + '?browse'}}" class='jqzoom' id='zoom1' rel="gal1">
            <img blc:src="@{${primaryMedia.url + '?browse'}}" th:alt="*{name}" th:title="*{name}" align="left" id="main_image" />
        </a>
    </div>

    <div id="product_thumbs_container">
    	<span class="thumbs_btn thumb_prev"><a href="javascript:;">prev</a></span>
    	<span class="thumbs_btn thumb_next"><a href="javascript:;">next</a></span>
    	<div class="thumbs_list">
	        <ul id="product_thumbs" class="clearfix">
                <li th:each="media, iterStat : *{sortedMedia}">
                    <a href="javascript:;" th:classappend="${media.key == 'primary' ? 'zoomThumbActive' : ''}"
                       th:rel="${'{ gallery: ''gal1'', smallimage: ''__@{${media.value.url}+'?browse'}__'', largeimage: ''__@{${media.value.url}}__'' }'}"
                       th:attr="data-tags=${media.value.tags}">
                        <img blc:src="@{${media.value.url}}" th:alt="*{name}" th:title="*{name} + '_' + ${iterStat.count}" />
                    </a>
                    <p class="thumbs_nav" th:text="${iterStat.count} + ' / ' + *{#maps.size(sortedMedia)}"></p>
                </li>
	        </ul>
    	</div>
    </div>
</div>
